<template>
  <div class="Search">
    <div class="search">
      <input
        type="text"
        placeholder="Search"
        v-model="key"
        @keyup.enter="handleSearch"
      />
      <div @click="handleSearch">搜索</div>
    </div>

    <div class="title"><span>搜索结果</span></div>
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :page-count="pageCount"
      :total="total"
      class="mt-4"
      style="justify-content: center; margin: 20px 0"
      :current-page="currentPage"
      @current-change="currentpage"
    />
    <!-- <div class="content">
      <div class="card" v-for="book in pageBookList" :key="book.id">
        <el-card shadow="hover" style="height: 100%; cursor: pointer">
          <div style="height: 300px; overflow: hidden">
            <img
              :src="book.coverImage"
              style="width: 100%"
              @error="imageError"
            />
          </div>

          <template #footer>
            <h2 class="bookTitle" style="margin-bottom: 5px">
              {{ book.title }}
            </h2>
            <p class="info" v-html="book.description"></p>
          </template>
        </el-card>
      </div>
    </div> -->
    <div class="content">
      <el-skeleton
        class="card"
        :loading="book.loading"
        animated
        v-for="book in pageBookList"
        :key="book.id"
      >
        <template #template>
          <!--  -->
          <el-card shadow="hover" style="height: auto; cursor: pointer">
            <div style="height: 300px; overflow: hidden">
              <el-skeleton-item
                variant="image"
                style="width: 100%; height: 300px"
              />
            </div>

            <template #footer>
              <el-skeleton-item
                variant="text"
                class="bookTitle"
                style="display: block; margin-bottom: 5px"
              ></el-skeleton-item>
              <el-skeleton-item
                variant="text"
                class="info"
                style="display: block"
                >{{ book.content }}</el-skeleton-item
              >
            </template>
          </el-card>
          <!--  -->
        </template>
        <template #default>
          <div class="card">
            <el-card shadow="hover" style="height: 100%; cursor: pointer">
              <div style="height: 300px; overflow: hidden">
                <img
                  :src="`https://static.zongheng.com/upload${book.coverUrl}`"
                  style="width: 100%"
                  @error="imageError"
                />
              </div>

              <template #footer>
                <h2
                  class="bookTitle"
                  style="margin-bottom: 5px"
                  v-html="book.name"
                ></h2>
                <p class="info" v-html="book.description"></p>
              </template>
            </el-card>
          </div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script setup>
import d_book from "../assets/images/d-book.png";

import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { onMounted, ref, watch, computed } from "vue";
import { searchBook } from "../api/api";
const route = new useRoute();
const router = new useRouter();
let key = ref("");
let page = ref(1);

const searchList = ref([]);
const pageBookList = ref([]);

let handleSearch = () => {
  router.push({
    path: "/home/search",
    query: {
      keyword: key.value,
    },
  });
};

let handleData = (data) => {
  if (data.hasOwnProperty("datas")) {
    pageCount.value = data.datas.totalPage;
    searchList.value = data.datas.list;
  } else {
    searchList.value = [];
  }

  searchList.value.forEach((item) => {
    item.loading = true;
  });
  pageBookList.value = searchList.value;
  getImages();
};

let total = computed(() => {
  return searchList.length;
});
let pageCount = ref(1);
let currentPage = ref(1);
//翻页回调

let currentpage = (v) => {
  currentPage.value = v;
  console.log(v);
  searchBook(route.query.keyword, v).then((res) => {
    console.log(res);
    handleData(res.data.data);
    pageBookList.value.forEach((item) => {
      item.loading = true;
      getImages();
    });
  });
};
//图片加载错误回调
let imageError = (e) => {
  e.target.src = d_book;
};

let getImages = async () => {
  for (const item of pageBookList.value) {
    let image = new Image();
    image.src = `https://static.zongheng.com/upload${item.coverUrl}`;
    image.onerror = (e) => {
      e.target.src = d_book;
    };
    image.onload = () => {
      setTimeout(() => {
        item.loading = false;
      }, 200);
    };
  }
};

onMounted(() => {
  key.value = route.query.keyword;
  searchBook(route.query.keyword, page.value).then((res) => {
    handleData(res.data.data);
  });
});

watch(route, () => {
  key.value = route.query.keyword;
  searchBook(route.query.keyword, page.value).then((res) => {
    handleData(res.data.data);
  });
});
</script>

<style class="scss">
.Search {
  .search {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    input {
      outline: none;
      border: 2px solid #e1251b;
      padding: 10px;
      width: 300px;
    }
    div {
      cursor: pointer;
      padding: 0 20px;
      color: #fff;
      background-color: #e1251b;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.2s;
      &:hover {
        background-color: #c81623;
      }
    }
  }
  .title {
    margin-top: 20px;
    font-size: 20px;
    padding: 5px 0;
    position: relative;
    padding-left: 24px;
    border-bottom: 1px dashed #ccc;
    &::before {
      content: "";
      display: block;
      position: absolute;
      height: 100%;
      width: 10px;
      background: #e1251b;
      left: 0;
      top: 0;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;

    .card {
      width: 25%;

      .bookTitle {
        font-size: 16px;
        font-weight: bold;
        height: 48px;
      }
      .info {
        line-height: 20px;
        height: 40px;
        overflow: hidden;
        text-align: justify;
      }
    }
  }
}
</style>
